<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">文件名</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" id="fileName"
                   placeholder="文件名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否多图</label>
        <div class="layui-input-block">
            <input type="checkbox" id="multiple" name="multiple" lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" id="convert" class="layui-btn">转换</button>
    </div>


</form>


<script type="text/javascript">

    layui.use(['form','upload'], function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#fileName' //绑定元素
            ,url: '/file/upload/' //上传接口
            ,accept: 'file'
            ,done: function(res){
                var fileName = res.data;
                $("#fileName").val(fileName);
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    $("#convert").click(function (data) {
        var fileName = $("#fileName").val();
        var multiple = $('#multiple').is(":checked");
        window.open("/pdf/convertToImage?fileName="+fileName+"&multiple="+multiple)
    })

</script>
</body>
</html>